<template>
  <div>
    <header>
      <span>北京</span>
      <input type="text" placeholder="面试地址" v-model="address" />
    </header>
    <section>
      <ul>
        <li v-for="(item,index) in suggestion" :key="index" @click="goAdd(item.address)">
          <img src="/static/logo.jpg" alt />
          <div>
            <p>{{item.title}}</p>
            <p>{{item.address}}</p>
          </div>
        </li>
      </ul>
    </section>
  </div>
</template>

<script>
import { throttle } from "../../utils";
export default {
  data() {
    return {
      address: "",
      suggestion: []
    };
  },
  watch: {
    address(newVal, oldVal) {
      let _this = this;
      this.$map.getSuggestion({
        //获取输入框值并设置keyword参数
        keyword: newVal, //用户输入的关键词，可设置固定值,如keyword:'KFC'
        region: "北京", //设置城市名，限制关键词所示的地域范围，非必填参数
        success: function(res) {
          //搜索成功后的回调
          _this.suggestion = res.data;
        },
        fail: function(error) {
          console.error(error);
        },
        complete: function(res) {
          console.log(res);
        }
      });
    }
  },
  created() {
    let _this = this;
    throttle(val => {
      this.$map.search({
        keyword: val,
        region: "北京",
        success: function(res) {
          console.log(res, "res");
        }
      });
    }, 300);
  },
  methods: {
    goAdd(address) {
      wx.setStorageSync('address',address)
      wx.navigateBack()
    }
  }
};
</script>

<style lang="scss" scoped>
header {
  width: 100%;
  height: 100rpx;
  display: flex;
  align-items: center;
  border-top: 1px solid #eee;
  border-bottom: 1px solid #eee;
  font-size: 32rpx;
  span {
    width: 26%;
    text-align: center;
    border-right: 1px solid #eee;
  }
  input {
    padding: 0 20rpx;
  }
}
li {
  width: 100%;
  height: 110rpx;
  border-bottom: 1px solid #eee;
  display: flex;
  align-items: center;
  padding-left: 60rpx;
  img {
    width: 44rpx;
    height: 44rpx;
  }
  div {
    flex: 1;
    padding-left: 30rpx;
    p {
      font-size: 34rpx;
      &:nth-child(2) {
        font-size: 24rpx;
        color: #c0c0c0;
      }
    }
  }
}
</style>